<template>
  <div>
    <a-modal class="form1"
             v-model="dialogVisible"
             title="拆分打包"
             width="1280px"
             height="610px"
             :dialog-style="{ top: '15vh' }"
             ok-text="确认"
             cancel-text="取消"
             @ok="handleOk()"
             @cancel="cancelOK()">
      <div class="splitPackage-box">
        <div class="splitPackage-left">
          <div class="splitPackage-left-title">
            <img src="../../../../assets/image/sellerHub/wdabao.png"
                 alt="">
            未打包物料 <span>（共<i>{{materialNum}}</i>个物料） </span>
            <div>
              <a-input placeholder="搜索物料编号/物料名称"
                       v-model="materialName"
                       @change="splitSearch()">
                <a-icon slot="prefix"
                        type="search" />
              </a-input>
            </div>
          </div>
          <div class="splitPackage-left-table">
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
                     :columns="columns"
                     :scroll="{ y: 357 }"
                     :data-source="data"
                     :pagination="false"
                     class="scroll-table">
              <template v-for="col in ['quantity']"
                        :slot="col"
                        slot-scope="text, record,">
                <div :key="col">
                  <div :value="text"
                       @change="e => handleChange(e.target.value, record, col,0)">
                    <!-- <span class="slot-left"
                          @click="e => handleChange(e.target.value, record.key, col,1)">
                      
                    </span> -->
                    <a-icon type="minus-circle"
                            class="slot-left"
                            @click="e => handleChange(e.target.value, record.key, col,1)" />
                    <a-input v-model="record.quantity" />
                    <a-icon type="plus-circle"
                            class="slot-right"
                            @click="e => handleChange(e.target.value, record.key, col,2)" />
                  </div>
                </div>
              </template>
            </a-table>
          </div>
        </div>
        <div class="splitPackage-center">
          <div @click="addParcel">生成新的包裹
            <a-icon type="right" />
          </div>
          <div @click="addAlreadyHaveParcel">移入当前包裹
            <a-icon type="right" />
          </div>
          <div @click="addParcelAll">全部生成新的
            <a-icon type="right" />
          </div>
          <div @click="delParcel">
            <a-icon type="left" />从包裹中移除
          </div>
          <div @click="delParcelAll">
            <a-icon type="left" />移除包裹
          </div>
          <div @click="delParcelArrAll">
            <a-icon type="left" />移除全部包裹
          </div>
        </div>
        <div class="splitPackage-right">
          <div class="splitPackage-left-title">
            <img src="../../../../assets/image/sellerHub/wdabao.png"
                 alt="">
            已打包包裹 <span>（共<i>{{parcelNum}}</i>个包裹） </span>
            <div>
              <a-input placeholder="搜索物料编号/物料名称"
                       v-model="splitName"
                       @change="getSearch()">
                <a-icon slot="prefix"
                        type="search" />
              </a-input>
            </div>
          </div>
          <div class=" splitPackage-right-table"
               v-if="parcelNum !== 0">
            <div :class="{'splitPackage-list':true,'ant-table-body':true,'scroll-Ys':parcelNameArr.length> 10  }">
              <div :class="{'active':parcelIndex === index }"
                   @click="parcelClick(index,item)"
                   v-for="(item,index) in parcelNameArr"
                   :key="index">{{item.name}}</div>
            </div>
            <a-table :row-selection="{ selectedRowKeys: selectedRowKeys1, onChange: onSelectChange1 }"
                     :columns="columns1"
                     :scroll="{y:357 }"
                     :data-source="data1"
                     :pagination="false"
                     class="scroll-table">
            </a-table>
          </div>
          <div class=" splitPackage-right-table"
               v-if="parcelNum == 0">
            <img src="../../../../assets/image/sellerHub/zanwus.png"
                 alt=""
                 width="217"
                 height="120"
                 style="margin: 102px 0 30px 82px;">
            <p style="padding-left: 102px;">请从左侧选择要打包的商品</p>
          </div>
        </div>
      </div>

      <template slot="footer">
        <a-button key="submit"
                  @click="handleOk"
                  type="danger">
          保存
        </a-button>
      </template>
    </a-modal>
  </div>
</template>
<script>
// import '@/assets/css/form.less'
const columns = [
  {
    title: '物料编号',
    dataIndex: 'materialNo',
    width: '15%',
    scopedSlots: { customRender: 'materialNo' },
  },
  {
    title: '物料名称',
    dataIndex: 'materialName',
    width: '38%',
    scopedSlots: { customRender: 'materialName' },
  },
  {
    title: '未打包数量',
    dataIndex: 'unPackedQuantity',
    width: '20%',
    scopedSlots: { customRender: 'unPackedQuantity' },
  },
  {
    title: '打包数量',
    width: '28%',
    dataIndex: 'quantity',
    scopedSlots: { customRender: 'quantity' },
  },
];
const columns1 = [
  {
    title: '物料编号',
    dataIndex: 'materialNo',
    width: '15%',
    scopedSlots: { customRender: 'materialNo' },
  },
  {
    title: '物料名称',
    dataIndex: 'materialName',
    width: '60%',
    scopedSlots: { customRender: 'materialName' },
  },
  {
    title: '打包数量',
    dataIndex: 'packedQuantity',
    width: '18%',
    scopedSlots: { customRender: 'packedQuantity' },
  },
];
const data = [];
const data1 = [];
export default {
  name: 'UserEditForm',
  props: {
    visible: {
      type: Boolean,
      default: false
    },
  },
  data () {
    this.cacheData = data.map(item => ({ ...item }));
    return {
      //左侧搜索用到的物料名称或编号
      materialName: '',
      //右侧搜索用到的物料名称或编号
      splitName: '',
      //id
      distributionOrderId: '',
      //包裹体积
      specifications: '',
      // 数量
      parcelNum: '',
      dialogVisible: false,
      //物料渲染对象
      data,
      dataArr: [],
      //包裹渲染对象
      data1,
      //最初物料对象
      materialArr: [],
      //物料数量
      materialNum: '0',
      //当前展示包裹深拷贝对象
      currentParcelArr: [],
      //包裹整体拷贝对象
      parcelArr: [],
      columns,
      columns1,
      editingKey: '',
      //当前点击的包裹下标
      parcelIndex: 0,
      // 包裹
      parcelNameArr: [],
      //左侧选中的包裹
      checkedPparcel: [],
      selectedRowKeys: [],
      //右侧表单选中包裹
      checkedMaterial: [],
      selectedRowKeys1: []
    }
  },
  // created () {
  //   this.getData('a28250a495837d1c4222cf67dfb5714e')
  // },
  methods: {
    onSelectChange (selectedRowKeys, selectedRows) {
      this.checkedPparcel = [];
      this.checkedPparcel = selectedRows
      this.selectedRowKeys = selectedRowKeys;
    },
    onSelectChange1 (selectedRowKeys, selectedRows) {
      this.checkedMaterial = [];
      this.checkedMaterial = selectedRows
      this.selectedRowKeys1 = selectedRowKeys;
    },

    //获取物料数据并获取包裹数据
    getData (id) {
      this.$store.dispatch('request', this.$api.sellerCenter.distributeDetails(id)).then(res => {
        console.log(res);
        this.distributionOrderId = id
        this.distributionOrderId = id
        //物料数据
        console.log(res.result);
        this.iniMaterialtList(res.result.distributionMaterialDTOList)
        //包裹数据
        this.iniParcelList(id)
        this.checkedPparcel = [];
        this.selectedRowKeys = [];
        this.selectedRowKeys1 = [];
        this.checkedMaterial = [];
        this.parcelIndex = 0

      })
    },
    //初始化获取打包物料
    iniMaterialtList (data) {
      this.data = []
      for (let i = 0; i < data.length; i++) {
        data[i].quantity = data[i].unPackedQuantity
        if (data[i].unPackedQuantity !== 0) {
          data[i].key = i + 1
          this.data.push(data[i])
          this.materialNum = this.data.length
          this.dataArr = JSON.parse(JSON.stringify(this.data));
        }
        this.materialArr = JSON.parse(JSON.stringify(data));
      }

    },
    //初始化获取包裹数据
    iniParcelList (id) {
      this.parcelNameArr = []
      this.parcelArr = []
      this.data1 = []
      this.$store.dispatch('request', this.$api.sellerCenter.distribution(id)).then(res => {
        console.log(res);
        let data = res.result.distributionParcelDTOList
        if (data.length != 0) {
          this.parcelNum = data.length
          this.data1 = data[0].distributeMaterialDTOList
          console.log(data);
          this.currentParcelArr = JSON.parse(JSON.stringify(data[0].distributeMaterialDTOList));
          this.specifications = data[0].specifications
          this.parcelArr = JSON.parse(JSON.stringify(data));
          this.parcelNameArr = data
          console.log(this.parcelArr);
        } else {
          this.parcelNum = 0
        }
      })
    },

    //确定新增
    handleOk () {
      this.$emit('confirmFileRsplitPackage', 123);
    },
    //取消新增 如果form表单没值就是第一次新增 有值就是取消修改取消新增
    cancelOK () {
      this.$emit('confirmFileRsplitPackage')
    },
    // 生成新包裹
    addParcel () {
      //先判断是否勾选再判断是否输入打包数量
      console.log(this.checkedPparcel);
      if (this.checkedPparcel.length === 0) {
        this.$message.error("请先勾选物料！");
        return
      }
      for (let i = 0; i < this.checkedPparcel.length; i++) {
        if (this.checkedPparcel[i].quantity === null) {
          this.$message.error("请先输入打包数量！");
          return
        }
        if (this.checkedPparcel[i].quantity === 0) {
          this.$message.error("打包数量不能为0！");
        }
      }
      this.parcelcl()
    },
    //包裹对象处理
    parcelcl () {
      let spasparcelArrafter = [];
      let nums = 1
      //判断 如果不是第一个包裹 先赋值

      if (this.parcelNum != 0) {

        for (let i = 0; i < this.parcelArr.length; i++) {
          let subItem = {
            code: this.parcelArr[i].code,
            name: '',
            distributionParcelDetailDTOList: [],
            specifications: 1,
            distributionOrderId: this.distributionOrderId,
            comment: '',
          }
          console.log(this.parcelArr, '123');
          subItem.name = this.parcelArr[i].name
          subItem.distributionParcelDetailDTOList = this.parcelArr[i].distributeMaterialDTOList
          subItem.specifications = this.parcelArr[i].specifications
          subItem.distributionOrderId = this.parcelArr[i].distributionOrderId
          console.log(subItem.distributionParcelDetailDTOList);
          for (let j = 0; j < subItem.distributionParcelDetailDTOList.length; j++) {
            subItem.distributionParcelDetailDTOList[j].quantity = null
          }
          spasparcelArrafter.push(subItem)
        }
      }
      console.log(spasparcelArrafter, '358');
      //包裹中的物料处理
      let subItem = {
        code: '',
        name: '',
        distributionParcelDetailDTOList: [],
        specifications: 1,
        distributionOrderId: this.distributionOrderId,
        comment: '',
      }
      for (let i = 0; i < this.checkedPparcel.length; i++) {
        subItem.distributionParcelDetailDTOList.push(this.checkedPparcel[i])
      }
      spasparcelArrafter.push(subItem)
      console.log(spasparcelArrafter);
      //循环对包裹里的物料做处理
      for (let i = 0; i < spasparcelArrafter.length; i++) {
        let item = spasparcelArrafter[i].distributionParcelDetailDTOList
        for (let j = 0; j < item.length; j++) {
          if (item[j].quantity === null) {
            item[j].quantity = item[j].packedQuantity
          }
        }
      }
      //之前的包裹加上本次新增包裹 并对物料做处理
      let spasoarcelArrbefour = JSON.parse(JSON.stringify(spasparcelArrafter));

      for (let i = 0; i < spasoarcelArrbefour.length; i++) {
        let num = i + 1
        spasoarcelArrbefour[i].name = '包裹' + num
        let item = spasoarcelArrbefour[i].distributionParcelDetailDTOList
        this.deleteItem(item)
      }
      console.log(spasoarcelArrbefour);
      this.$store.dispatch('request', this.$api.sellerCenter.parcelSave({ distributionOrderId: this.distributionOrderId, list: spasoarcelArrbefour })).then(res => {
        console.log(res);
        this.getData(this.distributionOrderId)
      })
    },

    //加入已有包裹
    addAlreadyHaveParcel () {
      //先判断是否勾选再判断是否输入打包数量
      let i, j;
      if (this.checkedPparcel.length === 0) {
        this.$message.error("请先勾选物料！");
        return
      }
      for (i = 0; i < this.checkedPparcel.length; i++) {
        if (this.checkedPparcel[i].quantity === null) {
          this.$message.error("请先输入打包数量！");
          return
        }
      }
      console.log('选择', this.checkedPparcel)
      console.log('当前', this.parcelIndex, this.parcelArr)

      // 找到当前包裹并把选中物料push进去
      for (j = 0; j < this.checkedPparcel.length; j++) {
        var tmpcheckedCode = this.checkedPparcel[j].materialNo
        console.log(this.parcelArr[this.parcelIndex]);
        var currentList = this.parcelArr[this.parcelIndex].distributeMaterialDTOList
        var hasPacked = false
        for (i in currentList) {
          if (!currentList[j].quantity) {
            currentList[j].quantity = parseInt(currentList[j].packedQuantity)
          }
          if (currentList[i].materialNo === tmpcheckedCode) {
            hasPacked = true
            currentList[i].quantity = Number(currentList[i].quantity) + Number(this.checkedPparcel[j].quantity)
          }
        }
        this.parcelArr[this.parcelIndex].distributeMaterialDTOList = currentList
        if (!hasPacked) {
          this.parcelArr[this.parcelIndex].distributeMaterialDTOList.push(this.checkedPparcel[j])
        }
      }

      console.log(this.parcelArr)

      for (i = 0; i < this.parcelArr.length; i++) {
        console.log('xxxxxxx', i)
        let item = this.parcelArr[i].distributeMaterialDTOList
        console.log('aaaa', item)
        for (j = 0; j < item.length; j++) {
          if (!item[j].quantity) {
            item[j].quantity = item[j].packedQuantity
          }
        }

        this.parcelArr[i].distributeMaterialDTOList = item
        this.parcelArr[i].distributionParcelDetailDTOList = item
        this.parcelArr[i].distributionOrderId = this.distributionOrderId
      }
      console.log(this.parcelArr);
      let parcelArrafter = []
      parcelArrafter = JSON.parse(JSON.stringify(this.parcelArr));
      for (let i = 0; i < parcelArrafter.length; i++) {
        delete parcelArrafter[i].distributeMaterialDTOList
        delete parcelArrafter[i].parcelId
        delete parcelArrafter[i].weight
        delete parcelArrafter[i].specifications
        let item = parcelArrafter[i].distributionParcelDetailDTOList
        this.deleteItem(item)
      }
      console.log(this.distributionOrderId);
      this.$store.dispatch('request', this.$api.sellerCenter.parcelSave({ distributionOrderId: this.distributionOrderId, list: parcelArrafter })).then(res => {
        console.log(res);
        this.getData(this.distributionOrderId)
      })
    },
    //全部生成新包裹
    addParcelAll () {
      let parcelAllbefour = []
      // de
      let nums = 1
      console.log(this.parcelNum, 'this.parcelNum');
      for (let i = 0; i < this.materialArr.length; i++) {
        let subItem = {
          code: '',
          name: '',
          distributionParcelDetailDTOList: [],
          specifications: 1,
          distributionOrderId: this.distributionOrderId,
          comment: '',
        }
        this.materialArr[i].quantity = this.materialArr[i].unPackedQuantity
        if (this.materialArr[i].unPackedQuantity !== 0) {
          let num = Number(this.parcelNum)
          num = Number(num) + nums
          subItem.name = '包裹' + num
          nums = nums + 1
          subItem.distributionParcelDetailDTOList.push(JSON.parse(JSON.stringify(this.materialArr[i])))
          parcelAllbefour.push(subItem)
        }
      }

      for (let i = 0; i < this.parcelArr.length; i++) {
        let item = this.parcelArr[i].distributeMaterialDTOList
        for (let j = 0; j < item.length; j++) {
          item[j].quantity = item[j].packedQuantity
        }
        this.parcelArr[i].distributionParcelDetailDTOList = item
        parcelAllbefour.push(JSON.parse(JSON.stringify(this.parcelArr[i])))
      }
      for (let i = 0; i < parcelAllbefour.length; i++) {
        delete parcelAllbefour[i].distributeMaterialDTOList
        delete parcelAllbefour[i].parcelId
        delete parcelAllbefour[i].weight
        delete parcelAllbefour[i].specifications
        let item = parcelAllbefour[i].distributionParcelDetailDTOList
        this.deleteItem(item)
      }
      console.log(parcelAllbefour, 'parcelAllbefour');
      this.$store.dispatch('request', this.$api.sellerCenter.parcelSave({ distributionOrderId: this.distributionOrderId, list: parcelAllbefour })).then(res => {
        console.log(res);
        this.getData(this.distributionOrderId)
      })
    },
    //包裹中移除
    delParcel () {
      let materialAllbAfter = []
      console.log(this.checkedMaterial);
      if (this.checkedMaterial.length === 0) {
        this.$message.error("请先勾选要从包裹中移除的物料！");
        return
      }
      console.log(this.parcelArr, 'baoguo');
      //获取移除物料所在包裹 并把包裹放进去
      let item = this.parcelArr[this.parcelIndex].distributeMaterialDTOList  //当前包裹

      console.log('当前：', item, 'xuanzhong', this.checkedMaterial)
      for (let j = 0; j < this.checkedMaterial.length; j++) {    //选中
        for (let i = 0; i < item.length; i++) {
          if (item[i].materialNo === this.checkedMaterial[j].materialNo) {
            item.splice(i, 1)
          }
        }
      }
      this.parcelArr[this.parcelIndex].distributeMaterialDTOList = item
      for (let i = 0; i < this.parcelArr.length; i++) {
        this.parcelArr[i].distributionParcelDetailDTOList = this.parcelArr[i].distributeMaterialDTOList
        let item = this.parcelArr[i].distributeMaterialDTOList
        console.log(this.parcelArr[i]);
        for (let j = 0; j < item.length; j++) {
          item[j].quantity = item[j].packedQuantity
        }
      }
      if (this.parcelArr[this.parcelIndex].distributeMaterialDTOList.length === 0) {
        this.parcelArr.splice(this.parcelIndex, 1)
      }
      materialAllbAfter = JSON.parse(JSON.stringify(this.parcelArr));
      for (let i = 0; i < materialAllbAfter.length; i++) {
        delete materialAllbAfter[i].distributeMaterialDTOList
        delete materialAllbAfter[i].parcelId
        delete materialAllbAfter[i].weight
        delete materialAllbAfter[i].specifications
        let item = materialAllbAfter[i].distributionParcelDetailDTOList
        this.deleteItem(item)
      }
      console.log(materialAllbAfter, 'this.checkedPparcel');
      this.$store.dispatch('request', this.$api.sellerCenter.parcelSave({ distributionOrderId: this.distributionOrderId, list: materialAllbAfter })).then(res => {
        console.log(res);
        this.getData(this.distributionOrderId)
      })
    },
    //移除当前包裹
    delParcelAll () {
      let materialAllbAfter = []
      this.parcelArr.splice(this.parcelIndex, 1)
      for (let i = 0; i < this.parcelArr.length; i++) {
        this.parcelArr[i].distributionParcelDetailDTOList = this.parcelArr[i].distributeMaterialDTOList
        let item = this.parcelArr[i].distributionParcelDetailDTOList
        for (let j = 0; j < item.length; j++) {
          item[j].quantity = item[j].packedQuantity
        }
      }

      materialAllbAfter = JSON.parse(JSON.stringify(this.parcelArr))
      console.log(materialAllbAfter);
      for (let i = 0; i < materialAllbAfter.length; i++) {

        delete materialAllbAfter[i].parcelId
        delete materialAllbAfter[i].distributeMaterialDTOList
        delete materialAllbAfter[i].weight
        delete materialAllbAfter[i].specifications
        let item = materialAllbAfter[i].distributionParcelDetailDTOList
        this.deleteItem(item)
      }
      console.log(materialAllbAfter);
      this.$store.dispatch('request', this.$api.sellerCenter.parcelSave({ distributionOrderId: this.distributionOrderId, list: materialAllbAfter })).then(res => {
        console.log(res);
        this.getData(this.distributionOrderId)
      })
    },
    //移除全部包裹
    delParcelArrAll () {
      let Arr = []
      this.$store.dispatch('request', this.$api.sellerCenter.parcelSave({ distributionOrderId: this.distributionOrderId, list: Arr })).then(res => {
        console.log(res);
        this.getData(this.distributionOrderId)
      })
    },
    deleteItem (item) {
      for (let j = 0; j < item.length; j++) {
        delete item[j].count
        delete item[j].packedQuantity
        delete item[j].totalPrice
        delete item[j].totalQuantity
        delete item[j].unPackedQuantity
        delete item[j].key
      }
    },
    //点击包裹
    parcelClick (num, item) {
      this.parcelIndex = num
      console.log(this.parcelIndex);
      console.log(item);
      this.splitName = ''
      this.data1 = item.distributeMaterialDTOList
      this.currentParcelArr = JSON.parse(JSON.stringify(item.distributeMaterialDTOList))
    },
    //左侧物料列表 物料名称编号模糊查询
    splitSearch () {
      console.log(this.dataArr);
      console.log(this.materialName);
      console.log(this.data);
      if (!this.materialName) {
        this.data = this.dataArr
      } else {
        let filterData = this.dataArr.filter(item => item.materialNo.indexOf(this.materialName) >= 0
          || item.materialName.indexOf(this.materialName) >= 0)
        this.data = filterData
        console.log(filterData)
      }
    },
    //右侧包裹 模糊查询搜索物料名称或编号
    getSearch () {
      console.log(this.currentParcelArr, '123');
      console.log(this.splitName);
      console.log(this.data1);
      if (!this.splitName) {
        console.log(1);
        this.data1 = JSON.parse(JSON.stringify(this.currentParcelArr));
      } else {
        console.log(2);
        let filterData = this.currentParcelArr.filter(item => item.materialNo.indexOf(this.splitName) >= 0
          || item.materialName.indexOf(this.splitName) >= 0)
        this.data1 = filterData
        console.log(filterData)
      }
    },

    //输入打包数量触发
    handleChange (value, key, column, Status) {
      console.log(value, key, column, Status);
      const newData = [...this.data];
      const target = newData.filter(item => key === item.key)[0];
      if (target) {
        //0 为输入数字  1为减一 2为加一
        if (Status === 0) {
          if (target[column] > 0 && target[column] <= target.unPackedQuantity) {
            target[column] = value;
          } else {
            this.$message.error("打包数量不能小于0，不能大于未打包数量");
            target[column] = ''
          }

        }
        if (Status === 1) {
          if (target[column] > 1) {
            target[column] = target[column] - 1
          }
        }
        if (Status === 2) {
          if (target[column] < target.unPackedQuantity) {
            target[column] = Number(target[column]) + 1
          }
        }
        this.data = newData;
        this.materialArr = newData
      }
    },
    //打包数量+1
    plus (e) {
      console.log(e);
    },

  },
  watch: {
    visible (newVal) {
      this.dialogVisible = newVal;
    }
  }
}
</script>
<style lang="less" scoped>
.splitPackage-box {
  overflow: hidden;
  > div {
    float: left;
  }
  .splitPackage-left {
    width: 540px;
    .splitPackage-left-title {
      font-size: 14px;
      color: @newColorGreyFontM;
      line-height: 32px;
      overflow: hidden;
      padding: 24px 0 10px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        vertical-align: text-top;
        margin-top: 2px;
      }
      > span {
        font-size: 12px;
        color: rgba(39, 36, 36, 0.5);
        i {
          font-style: normal;
          color: @activeRed;
        }
      }
      > div {
        float: right;
        input {
          width: 150px;
          height: 24px;
          border-radius: 3px;
          border: 1px solid @greyBorder;
          font-size: 12px;
        }
        .anticon-search {
          color: #ccc;
        }
      }
    }
    .splitPackage-left-table {
      i {
        font-size: 16px;
        color: @newColorGreyFontM;
        opacity: 0.8;
        line-height: 24px;
      }
      .slot-left {
        padding-right: 8px;
      }
      .slot-right {
        padding-left: 8px;
      }
      .slot-left:active {
        color: @activeRed;
      }
      .slot-right:active {
        color: @activeRed;
      }
    }
  }
  .splitPackage-center {
    width: 120px;
    margin: 124px 16px 86px 16px;
    > div {
      width: 120px;
      height: 32px;
      line-height: 30px;
      color: @newColorGreyFontM;
      font-size: 12px;
      text-align: center;
      border: 1px solid @newBorder;
      border-radius: 3px;
      margin-bottom: 12px;
      cursor: pointer;
      transition: all 0.3s;
    }
    > div:nth-child(n + 4) {
      text-align: left;
      i {
        padding-right: 8px;
        padding-left: 12px;
      }
    }
    > div:nth-child(-n + 3) {
      i {
        padding-left: 8px;
      }
    }
    > div:nth-child(3) {
      margin-bottom: 40px;
    }
    > div:hover {
      border: 1px solid @activeRed;
      color: @activeRed;
    }
  }
  .splitPackage-right-table {
    padding: 16px 16px 16px 82px;
    border-radius: 2px;
    border: 1px solid @newBorder;
    height: 405px;
    position: relative;
    .splitPackage-list {
      width: 74px;
      height: 404px;
      background-color: #f9f9f9;
      position: absolute;
      top: 0;
      left: 0;
      border-bottom: 1px solid @newBorder;
      border-right: 1px solid @newBorder;

      > div {
        text-align: center;
        height: 40px;
        line-height: 40px;
        border-left: 2px solid transparent;
        cursor: pointer;
      }
    }
    .scroll-Ys {
      overflow-y: scroll;
    }
  }
  .splitPackage-right {
    width: 540px;
    .splitPackage-left-title {
      font-size: 14px;
      color: @newColorGreyFontM;
      line-height: 32px;
      overflow: hidden;
      padding: 24px 0 10px;
      img {
        width: 16px;
        height: 16px;
        margin-right: 8px;
        vertical-align: text-top;
        margin-top: 2px;
      }
      > span {
        font-size: 12px;
        color: rgba(39, 36, 36, 0.5);
        i {
          font-style: normal;
          color: @activeRed;
        }
      }
      > div {
        float: right;
        input {
          width: 150px;
          height: 24px;
          border-radius: 3px;
          border: 1px solid @greyBorder;
          font-size: 12px;
        }
        .anticon-search {
          color: #ccc;
        }
      }
    }
    .splitPackage-right-title {
      padding-top: 26px;
      margin-bottom: 12px;
      overflow: hidden;
      > div {
        > span {
          float: left;
          margin-right: 24px;
          font-size: 12px;
          color: @colorGreyFont;
          height: 24px;
          line-height: 14px;
          cursor: pointer;
        }
      }
      .parcelbox {
        > span {
          margin-top: 12px !important;
        }
      }
      .search {
        float: right;
      }
    }
  }
}
.active {
  font-size: 14px !important;
  color: @activeRed !important;
  background: #fff;
  border-left: 2px solid @activeRed !important;
}
/deep/ .ant-table-placeholder {
  border: none;
}
/deep/ .ant-input {
  font-size: 12px;
  height: 32px;
  width: 190px;
  text-align: left;
  border: 1px solid @newBorder;
}
/deep/ .ant-input-affix-wrapper .ant-input:not(:first-child) {
  padding-left: 34px;
}
/deep/.ant-input-affix-wrapper .ant-input-prefix {
  left: 14px;
}
/deep/ .ant-modal {
  border-radius: 8px;
}
/deep/ .ant-modal-header {
  padding: 18px 17px 19px 24px;
  font-family: PingFangSC, PingFangSC-Medium;
  font-weight: 500;
  border-bottom: 1px solid #ebedf2;
  .ant-modal-title {
    font-size: 16px;
    font-family: PingFangSC, PingFangSC-Medium;
    font-weight: 500;
    color: @newColorGreyFontM;
    line-height: 16px;
  }
}
/deep/ .ant-modal-close-x {
  height: 54px;
  width: 56px;
  line-height: 54px;
}
/deep/ .ant-modal-body {
  padding: 0 24px;
}
/deep/ .ant-modal-footer {
  box-shadow: 0px 1px 0px 0px #f4f5f8 inset;
  padding: 16px 17px;
  height: 64px;
  border-radius: 0px 0px 8px 8px;
  text-align: center;
  .ant-btn {
    width: 72px;
    height: 32px;
    background: @activeRed;
    text-align: center;
    line-height: 26px;
    color: #fff;
    padding: 0;
    border-radius: 2px;
    span {
      font-size: 12px;
      color: #fff;
    }
  }
  .ant-btn-primary {
    margin-left: 12px;
    span {
      color: #fff;
    }
  }
}
/deep/ .ant-table-header {
  background: #f9f9f9;
  .ant-table-thead {
    background: #f9f9f9;
    tr {
      th {
        font-size: 12px;
        color: @newColorGreyFontM;
        padding: 14px 0;
        text-align: center;
        font-weight: 500;
        line-height: 12px;
      }
    }
  }
}

.splitPackage-right-table,
.scroll-table {
  /deep/.ant-table-body {
    &::-webkit-scrollbar {
      //整体样式
      height: 10px;
      width: 8px;
      padding-left: 8px;
    }
    &::-webkit-scrollbar-thumb {
      //滑动滑块条样式
      border-radius: 4px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      // background: #00aaff;
      background: #adadad;
      width: 8px;
    }
    &::-webkit-scrollbar-track {
      //轨道的样式
      -webkit-box-shadow: 0;
      border-radius: 0;
      width: 0;
      background: transparent;
    }
  }
}

/deep/ .ant-table-row-cell-break-word {
  padding: 19px 0 17px 0 !important;
  text-align: center;
  font-size: 12px;
  color: @colorCommonFont;
  line-height: 12px;
}
/deep/ .splitPackage-left-table .ant-input {
  padding: 0;
  width: 59px;
  height: 24px;
  line-height: 24px;
  border-radius: 0;
  border: none;
  color: @newColorGreyFontM;
  background: transparent;
  border-bottom: 1px solid #ebedf2;
  text-align: center;
}
/deep/ .splitPackage-left-table .ant-input:focus {
  box-shadow: none;
}
/deep/ .ant-table-tbody > tr > td {
  position: relative;
}
/deep/ .ant-table-tbody > tr > td {
  padding: 14px 0 !important;
}
/deep/ .anticon-left {
  vertical-align: -0.15em;
}
/deep/ .ant-table-body {
  overflow-y: auto !important;
}
</style>